<template>
  <div class="custom-dialog" v-if="visible">
    <h3>这是老师自定义的 Dialog 对话框</h3>
    <p>visible 的值是：{{ visible }}</p>
    <el-button type="warning" size="mini" @click="close">关闭对话框</el-button>
  </div>
</template>

<script>
export default {
  name: 'MyDialog',
  // props 中的数据，都是只读的，不允许被修改
  props: {
    // 控制对话框的展示和隐藏
    visible: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    close() {
      // 点击子组件中的关闭按钮，希望给父组件传一个 false
      // 目的：为了让父组件，把布尔值改成 false
      // this.$emit('visible', false)
      // this.$emit('update:.sync修饰符前面的属性名', false)
      this.$emit('update:visible', false)
    }
  }
}
</script>

<style lang="less" scoped>
.custom-dialog {
  border: 1px solid red;
  min-height: 200px;
}
</style>
